<template>
	<view class="index">
		<template v-if="JiaZai_ZhuangTai == 'YouShuJu'">
			<view class="CaoGao-LieBiao">
				<view class="XunHuan XunHuan-BiaoTou">
					<view class="XunHuan-id">ID</view>
					<view class="XunHuan-BiaoTi">标题</view>
					<view class="XunHuan-SheZhi">设置</view>
				</view>
				<view
					v-for="item in Api_CaoGao_LieBiao"
					class="XunHuan">
					<view class="XunHuan-id">{{item.id}}</view>
					<view class="XunHuan-BiaoTi"><text>{{item.title ? item.title : '本帖无标题'}}</text></view>
					<view class="XunHuan-SheZhi">
						<view @click="DianJi_BianJi(item.id)">编辑</view>
						<text @click="DianJi_ShanChu_CaoGao(item.id)">删除</text>
					</view>
				</view>
			</view>
			<view style="display: flex;align-items: center;justify-content:center;">
				<view
					class="YouRan-UI-AnNiu-1 Flex"
					style="width: 200rpx;background: #409EFF;color: #FFF;margin: 25rpx 25rpx 0 0;"
					@click="DianJi_XinJian_CaoGao">新建草稿</view>
				<view
					class="YouRan-UI-AnNiu-1 Flex"
					style="width: 200rpx;background: #F56C6C;color: #FFF;margin: 25rpx 0 0 0;"
					@click="DianJi_CaoGao_QuanBu_ShanChu">全部删除</view>
			</view>
		</template>
		<template v-if="JiaZai_ZhuangTai == 'JiaZaiZhong'">
			<YouRan-UI-JiaZaiZhong LeiXing="JuBu"></YouRan-UI-JiaZaiZhong>
		</template>
		<template v-if="JiaZai_ZhuangTai == 'WuShuJu'">
			<view class="CaoGao-LieBiao">
				<view class="XunHuan XunHuan-BiaoTou">
					<view class="XunHuan-id">ID</view>
					<view class="XunHuan-BiaoTi">标题</view>
					<view class="XunHuan-SheZhi">设置</view>
				</view>
				<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
					<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
					<view class="Zt-ZhanWeiSe">暂无任何数据</view>
				</view>
			</view>
			<view
				class="YouRan-UI-AnNiu-1 Flex"
				style="width: 200rpx;background: #409EFF;color: #FFF;margin: 25rpx auto;"
				@click="DianJi_XinJian_CaoGao">新建草稿</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Api_CaoGao_LieBiao:[],
				JiaZai_ZhuangTai:"JiaZaiZhong",
			}
		},
		mounted() {
			uni.$on('ChongXinQingQiu_CaoGaoLieBiao', (data) => {
				this.QingQiu_CaoGao_LieBiao();
			});
		},
		onLoad() {
			this.QingQiu_CaoGao_LieBiao();
		},
		methods: {
			QingQiu_CaoGao_LieBiao(){
				uni.request({
					url:this.$_URL() + "/api/v2/editor/post/drafts",
					method:'GET',
					header: this.$_Fresns_Header(),
					success: (res) => {
						this.Api_CaoGao_LieBiao = res.data.data.list;
						if(this.Api_CaoGao_LieBiao.length){
							this.JiaZai_ZhuangTai = "YouShuJu"
						}else{
							this.JiaZai_ZhuangTai = "WuShuJu"
						}
					}
				})
			},
			DianJi_CaoGao_QuanBu_ShanChu(){
				uni.showModal({
					title: "提示",
					content: "是否全部删除？不可恢复！",
					success: (res) => {
						if(res.confirm) {
							this.DianJi_CaoGao_QuanBu_ShanChu_FangFa()
						}
					}
				});
			},
			DianJi_CaoGao_QuanBu_ShanChu_FangFa(){
				uni.showLoading({ title: "删除中" });
				return new Promise((presolve, preject) => {
					let uploads = [];
					this.Api_CaoGao_LieBiao.forEach((item, i) => {
						uploads[i] = new Promise((resolve) => {
							uni.request({
								url:this.$_URL() + "/api/v2/editor/post/" + item.id,
								method:'DELETE',
								header: this.$_Fresns_Header(),
								success(res) {
									if(res.data.code == 0){
										resolve()
									}else{
										uni.hideLoading();
										resolve()
									}
								},
								fail(err) {
									
								}
							})
						})
					})
					Promise.all(uploads).then(res => {
						//图片上传完成
						presolve(res)
						uni.hideLoading();
						this.QingQiu_CaoGao_LieBiao();
					}).catch(err => {
						preject(err)
						uni.showToast({
							title: '删除失败请重试',
							icon: 'none'
						})
					})
				})
			},
			// 点击，删除，草稿
			DianJi_ShanChu_CaoGao(id){
				uni.showModal({
					title: "提示",
					content: "是否删除本草稿？不可恢复哟！",
					success: (res) => {
						if(res.confirm) {
							uni.request({
								url:this.$_URL() + "/api/v2/editor/post/" + id,
								method:'DELETE',
								header:this.$_Fresns_Header(),
								success: (res_) => {
									if(res_.data.code == 0){
										uni.showToast({
											title:"删除成功",
											icon:"none",
											duration:1000
										});
										this.JiaZai_ZhuangTai = "JiaZaiZhong";
										this.QingQiu_CaoGao_LieBiao();
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							})
						}
					}
				});
			},
			DianJi_XinJian_CaoGao(){
				this.$_TiaoZhuan('_FaBu/_FaBu?LeiXing=ChuangJian')
			},
			DianJi_BianJi(e){
				uni.redirectTo({
					url:"/pages/_FaBu/_FaBu?LeiXing=GengXin&id=" + e
				})
			}
		}
	}
</script>

<style lang="scss">
.index{
	overflow: hidden;
	view{
		font-size: 28rpx;
	}
	.CaoGao-LieBiao{
		.XunHuan{
			display: flex;
			width: 100%;
			height: 70rpx;
			border-bottom: 1rpx solid $BianKuangSe;
			.XunHuan-id{
				flex-shrink: 0;
				width: 100rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $ZhanWeiSe;
			}
			.XunHuan-BiaoTi{
				flex: 1;
				height: 70rpx;
				display: flex;
				align-items: center;
				text{
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
			.XunHuan-SheZhi{
				display: flex;
				flex-shrink: 0;
				width: 200rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				view{
					font-size: 22rpx;
					margin: 0 25rpx 0 0;
					width: 80rpx;
					height: 40rpx;
					border: 1rpx solid $LanSe;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 100rpx;
					color: $LanSe;
				}
				text{
					font-size: 22rpx;
					color: $HongSe;
				}
			}
		}
		.XunHuan-BiaoTou{
			background: $BeiJingSe;
			.XunHuan-id{
				color: $YuanSe;
			}
			.XunHuan-BiaoTi{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>